<template>
    <div class="box">
        <headers title="购物车"></headers>
        <div v-if="shopList.length > 0">
            <van-swipe-cell v-for="(v, i) in shopList" :key="i">
                <van-card :price="v.goods_price" :title="v.goods_name" thumb="">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="v.checked"></van-checkbox>

                            <img v-lazy="v.goods_big_logo ? v.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                                style="width: 6rem;height: 6rem;" />
                        </div>
                    </template>

                    <template #footer>
                        <van-stepper v-model="v.num" />
                        <van-button type="default" size="mini" @click="delFun(i)">删除</van-button>
                    </template>
                </van-card>



                <template #right>
                    <van-button square text="删除" @click="delFun(i)" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>

            <div style="height: 9rem;"></div>

            <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
                <van-checkbox v-model="checked">全选</van-checkbox>
            </van-submit-bar>


        </div>

        <div v-else>
            <van-empty description="暂无商品" />
        </div>

    </div>
</template>

<script setup>
import { ref } from "vue";
import { swiperdataApi, catitemsApi, categoriesApi, searchApi, detailApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

import headers from "@/components/headers.vue";

import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let shopList = ref(store.shopCar)

const value = ref(1);

import { showToast } from 'vant';

// showToast('提示内容');

//删除
const delFun = (i) => {
    shopList.value.splice(i, 1);
    showToast('删除成功');
}


</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    overflow: auto;

    .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }

    .van-submit-bar {
        bottom: 5rem;
    }
}
</style>